import React, { Component } from 'react'
import {manager} from './actionCreators'
import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'
import './login.css'


class Login extends Component {
    constructor(props){
        super();
        this.state={
            inpname:'',
            inppsd:''
        }    
    }   
    nameChange=(e)=>{
        this.setState({inpname:e.target.value})
    }
    psdChange=(e)=>{
        this.setState({inppsd:e.target.value})
    }

    render() { 
        //  console.log(this.props)
        let data={username:this.state.inpname,password:this.state.inppsd};
        return (
           
            <div className="login-big" style={{height:'745px',width:'100%'}}>
                    <p className='title1'>i占后台管理系统</p>
                    <div className='login'>
                        <div style={{marginTop:'50px',marginLeft:'20px'}}><span>职工号：</span><input 
                            style={{marginLeft:'10px'}}
                            type="text" 
                            placeholder="请输入账号" 
                            value={this.state.inpname}
                            onChange={this.nameChange}
                        /></div><br/><br/>
                        <div style={{marginLeft:'20px'}}><span>密码：</span><input
                            style={{marginLeft:'24px'}}
                            className="psd" 
                            type="password" placeholder="请输入密码" 
                            value={this.state.inppsd}
                            onChange={this.psdChange}
                        /></div><br/><br/>
                        <button className="loginBtn" onClick={(e)=>{      
                            this.props.dispatch(manager(data));
                            // console.log(data);
                            
                            setTimeout(()=>{
                                // console.log(JSON.parse(this.props.managers));
                                // console.log(JSON.parse(this.props.managers?.Mname));

                                if(this.props.managers==false){
                                    alert('用户名或密码有误');
                                    return ;
                                }else{
                                    this.props.history.push({
                                        pathname:'/home',
                                        mno:this.state.inpname,
                                        pwd:this.state.inppsd
                                    });
                                }
                                // this.props.history.push({
                                //     pathname:'/manager',
                                //     mno:this.state.inpname,
                                //     pwd:this.state.inppsd
                                // });
                                
                            },500);
                        }
                        }>登录</button>
                        {/* <p className="bottomtxt">登录擅食轻减官方管理账号 welcome login our management system</p> */}
                    </div>
               {/* </div> */}
            </div>
        )
    }
}
const mapStateToProps=(state)=>({
    managers:state.login.managers
});

const view=connect(mapStateToProps) (Login);
export default withRouter(view);


